<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
<script>
  let charts = echarts.init(document.getElementById('box'));


  let option = {
    title: [{
        text: 'hello'
      },
      {
        text: 'world',
        left: 'center',
        top: 'center'
      }
    ],
    tooltip: {},

    series: [{
      name: '姓名',
      type: 'pie',
      radius: ['40%', '50%'],
      // center: ['30%', '50%'],
      // roseType: 'radius',
      labelLine: {
        length: 30,
        length2: 50
      },
      itemStyle: {
        borderWidth: 2,
        borderColor: '#fff'
      },
      label: {
        formatter(obj) {
          return `{a|●}${obj.name}{b|${obj.value}}`
        },
        padding: [0, -30, 25, -50],
        rich: {
          a: {
            fontSize: 30
          },
          b: {
            fontWeight: 800
          }
        }
      },
      data: [{
          name: "A",
          value: 101
        },
        {
          name: "B",
          value: 230
        },
        {
          name: "AC",
          value: 300
        },
        {
          name: "AD",
          value: 151
        }
      ]
    }]
  }

  charts.setOption(option);
</script>